import React from 'react'
import PostFrame from '../ui-components/postFrame'
import SelectList from '../ui-components/selectList'
import data from './test-data'
import style from './style'
import stylePostframe from './style.postframe'
import Code from './Code'

export default
class TestPostFrame extends React.Component {

	state = {
		pics: []
	}

  add = (file) => {
    const load = k => {
      setTimeout(() => {
        this.setState({
          pics: [
            ...this.state.pics.filter(pic => pic.key !== k), 
            {
              uuid: new Date().getTime(),
              url: 'http://ww2.sinaimg.cn/square/00696j80jw1f25k9k849wj30c003oq30.jpg'
            }
          ]
        })
      }, 3000)
    }
    const key = Symbol(file.name)
    this.setState({
      pics: [...this.state.pics, {key, file}]
    })

    load(key)
  }

  clear = (uuid) => {
    if (uuid) {
      this.setState({
        pics: this.state.pics.filter(pic => pic.uuid != uuid)
      })
    } else {
      this.setState({
        pics: []
      })
    }
    setTimeout(() => {
      console.log('pics last: ' + this.state.pics.length)
    }, 0)
  }

	render() {
		return (
			<div className={style.root}>
				<Code>{'<PostFrame addons={[...]} btn={..} label={..} post={..}/>'}</Code>
				<div>
					<PostFrame 
						addons={['smile', 'ait', 'pic']}
						className={stylePostframe.root}
						uploadPic={this.add}
						clearUploadedPics={this.clear.bind(this)}
						uploadedPics={this.state.pics}
						load={(query) => {console.log(`load query: ${query}`)}}
						btn="发布" 
						label="发表新状态..."
						atData={data.atList.data}
						post={({content}) => {console.log(`发布: ${content}`)}} 
						multi
					>
						<SelectList 
							item={
								({ avatarUrl, fullName, jobTitle }, attrs={}) => (
									<li {...attrs}>
										<img src={avatarUrl}/>
										<span>{ fullName }</span>
										<span>{ jobTitle }</span>
									</li>
								)
							}
						/>
					</PostFrame>
				</div>
				<div>
					<PostFrame 
						addons={['smile', 'ait']}
						className={stylePostframe.root}
						uploadPic={this.add}
						clearUploadedPics={this.clear.bind(this)}
						uploadedPics={this.state.pics}
						load={(query) => {console.log(`load query: ${query}`)}}
						btn="评论" 
						label="写评论.."
						atData={data.atList.data}
						post={({content}) => {console.log(`发布: ${content}`)}} 
					>
						<SelectList 
							item={
								({ avatarUrl, fullName, jobTitle }, attrs={}) => (
									<li {...attrs}>
										<img src={avatarUrl}/>
										<span>{ fullName }</span>
										<span>{ jobTitle }</span>
									</li>
								)
							}
						/>
					</PostFrame>
				</div>
			</div>
		)
	}
}
